<template>
    <div class="box">

        <el-card>
            <template #header>
                <div class="box1">
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item :to="{ path: '/' }">订单提醒</el-breadcrumb-item>
                        <el-breadcrumb-item>
                            <a href="/">订单信息</a>
                        </el-breadcrumb-item>
                    </el-breadcrumb>
                    <div style="margin-left:20px;">
                        <el-button color="#1fb394" :icon="Printer" @click="printOrder">打印</el-button>
                    </div>
                </div>
            </template>
            <div class="content" >
                <h1 style="color: red;">{{ detail.status == 1 ? '未完成' : '已完成' }}</h1>

                <div class="smbox">
                    <h4>订单号:</h4>
                    <p style="margin-left: 20px;">{{ detail.order_sn }}</p>
                </div>
                <div class="smbox">
                    <h4>用户昵称:</h4>
                    <p style="margin-left: 20px;">{{ detail.nickname }}</p>
                </div>
                <div class="smbox">
                    <h4>消费项目:</h4>
                    <p style="margin-left: 20px;">{{ detail.name }}</p>
                </div>

                <div class="smbox">
                    <h4>订单金额:</h4>
                    <p style="margin-left: 20px;">{{ detail.price }}</p>
                </div>
                <div class="smbox">
                    <h4>折扣金额:</h4>
                    <p style="margin-left: 20px;">{{ detail.discount }}</p>
                </div>
                <div class="smbox">
                    <h4>加送币抵扣:</h4>
                    <p style="margin-left: 20px;">{{ detail.deduction }}</p>
                </div>
                <div class="smbox">
                    <h4>支付金额:</h4>
                    <p style="margin-left: 20px;">{{ detail.pay_price }}</p>

                </div>
                <div class="smbox">
                    <h4>下单时间:</h4>
                    <p style="margin-left: 20px;">{{ detail.addtime }}</p>
                </div>
                <div class="smbox">
                    <h4>完成时间:</h4>
                    <p style="margin-left: 20px;">{{ detail.pay_time }}</p>
                </div>
            </div>
            <!-- 打印专用容器（默认隐藏） -->
            <div class="print-container" ref="printContent">
                <p style="font-size: 26px; text-align: center;">智芯至擎</p>
                <table border="1px" cellspacing="0" style="width: 100%;text-align: center; font-size: 16px; border-collapse: collapse;"

                    cellpadding="10px" >
                    <tr style="height: 50px;">
                        <td>工单号</td>
                        <td colspan="3">{{ detail.work_number }}</td>
                    </tr>
                    <tr style="height: 50px;">
                        <td>订单号码</td>
                        <td colspan="3">{{ detail.order_sn }}</td>

                    </tr>
                    <tr style="height: 50px;">
                        <td>车架号</td>
                        <td colspan="3">{{ detail.carframe_number }}</td>

                    </tr>
                    <tr style="height: 50px;">
                        <td>消费项目</td>
                        <td>{{ detail.name }}</td>
                        <td>车牌号</td>
                        <td>{{ detail.plate_number }}</td>
                    </tr>
                    <tr style="height: 50px;">
                        <td>手机号</td>
                        <td>{{ 1351422 }}</td>
                        <td>日期</td>
                        <td>{{ detail.addtime }}</td>
                    </tr>
                    <tr style="height: 40px;">
                    </tr>
                    <tr style="height: 50px;">
                        <td>能源币</td>
                        <td>{{ detail.deduction }}</td>
                        <td>支付金额</td>
                        <td>￥{{ detail.pay_price }}</td>
                    </tr>
                    <tr style="height: 50px;">
                        <td>订单金额</td>
                        <td>￥{{ detail.price }}</td>
                        <td>折扣金额</td>
                        <td>￥{{ detail.discount }}</td>
                    </tr>
                    <tr style="height: 50px;">
                        <td>备注</td>
                        <td colspan="3">{{ detail.remark }}</td>
                    </tr>
                    <tr style="height: 50px;">
                        <td>用户签字</td>
                        <td colspan="3"></td>
                    </tr>
                </table>
            </div>
            <template #footer>
                <div style="margin-left: 300px;">
                    <el-Button color="#c2c2c2" @click="router.back()">返回</el-Button>
                </div>
            </template>

        </el-card>
    </div>

</template>

<script setup>
import { Printer } from '@element-plus/icons-vue';
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import instance from '../utils/request';

const route = useRoute();
const router = useRouter();
// 打印实例
const printContent = ref(null)
const id = route.query.id;
const detail = ref({})
onMounted(async () => {
    let res = await instance.get('Seller/info', {
        params: {
            id: id
        }
    })
    if (res.code == 200) {
        detail.value = res.data
    }

})

const printOrder = () => {

    const windowPrt = window.open('', '', 'left=0,top=0,width=800,height=400,toolbar=0,scrollbars=0,status=0');
    if (windowPrt) {
        if (printContent.value) {
            windowPrt.document.write(printContent.value.outerHTML);
            windowPrt.document.close();
            windowPrt.focus();
            windowPrt.print();
            windowPrt.close();
        }
    }
}

</script>

<style lang="scss" scoped>
@media screen {
    .print-container {
        display: none;
    }

    /* 打印容器在屏幕上隐藏 */
}

.box {
    width: 500px;
    height: 600px;
    margin: 0 auto;

    .box1 {
        display: flex;
        align-items: center;
        height: 45px;
    }

    .content {
        width: 100%;
        height: 450px;

        .smbox {
            display: flex;
            margin-top: 20px;
        }
    }
}
</style>